<template>
  <div class="home">
    <!-- <h2>Home Page</h2> -->
    <indexHeader></indexHeader>
    <navSwiper></navSwiper>
    <newGoodCourse :newCourses="newCourses" :hotCourse="hotCourse"></newGoodCourse>
    <!-- <foot></foot> -->
  </div>
</template>

<script>
import indexHeader from '@/components/index/header.vue';
import navSwiper from '@/components/index/navSwiper.vue';
import newGoodCourse from '@/components/index/newGoodCourse.vue';
// import foot from '@/components/foot/foot.vue';

export default {
  components: {
    indexHeader,
    navSwiper,
    newGoodCourse,
    // foot
  },
  async asyncData(app) {
    let newCourses = []
    let hotCourse = []
    let resNewCourses = await app.$getNewCourse({
      pageNum: 1,
      pageSize: 8
    })

    let regGetHotCourse = await app.$getHotCourse({
      pageNum: 1,
      pageSize: 6
    })

    if (resNewCourses.meta.code == '200') {
      newCourses = resNewCourses.data.pageInfo.list
      newCourses.forEach(item => {
        switch (item.courseLevel) {
          case 1:
            item.courseLevel = '初级';
            break;
          case 2:
            item.courseLevel = '中级';
            break;
          case 3:
            item.courseLevel = '高级';
            break;
          default:
            item.courseLevel = ''
        }
      })
    }

    if (regGetHotCourse.meta.code == '200') {
      hotCourse = regGetHotCourse.data.pageInfo.list
      hotCourse.forEach(item => {
        switch (item.courseLevel) {
          case 1:
            item.courseLevel = '初级';
            break;
          case 2:
            item.courseLevel = '中级';
            break;
          case 3:
            item.courseLevel = '高级';
            break;
          default:
            item.courseLevel = ''
        }
      })
    }

    return {
      newCourses,
      hotCourse
    }
  },
};
</script>

<style scoped>
</style>
